{% extends "base.html" %}

{% block title %}选择集群{% endblock %}

{% block head %}
{{ super() }}
{% endblock %}

{% block content %}
<!-- 页面头 -->
<section class="content-header">
  <!--头部标题-->
  <h1>
    选择集群
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li><a href="/job">代理配置</a></li>
    <li class="active">选择集群</li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">


  <div class="box ">
    <div class="box-header with-border">
      <h3 class="box-title">集群</h3>
    </div>
    <!-- /.box-header -->

    <div class="box-body">
      <div class="form-group">
        <div id="cluster_btn_zone">
          <!--动态填充按钮-->
        </div>
      </div>
    </div>
  </div>


</section>
<!-- /.页面内容 -->
{% endblock %}


{% block script %}

<script type="text/javascript">
    $(function () {
        let url = "/api/cluster_list"
        $.ajax({
            url: url,
            success: function (data) {
                console.log(data)
                for (let i in data) {
                    // t = '<p><button type="button" class="btn btn-default">' + data[i].name + '</button></p>'
                    u = '/proxy/cluster/' + data[i].id
                    t = '<p><a href="' + u + '" class="btn btn-default" role="button">' + data[i].name + '</a></p>'
                    $('#cluster_btn_zone').append(t)
                }


            }
        })
    })
</script>
{% endblock %}